<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index }}
          <!-- {{ scope.row.jobId }} -->
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">  {{ scope.row.name }} </template>
      </el-table-column>
      <el-table-column
        label="进程详情"
        min-width="150px"
        width="200px"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope"> {{ scope.row.description }}  </template>
      </el-table-column>
      <el-table-column label="输入源" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          {{ scope.row.source }}
        </template>
      </el-table-column>
      <el-table-column label="输出源" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          {{ scope.row.sink }}
        </template>
      </el-table-column>
      <el-table-column label="任务描述" show-overflow-tooltip align="center">
        <template slot-scope="scope"> {{ scope.row.remark }} </template>
      </el-table-column>Î
      <el-table-column class-name="status-col" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.statename === 'STOPPED' ? 'info': 'success'">{{
            scope.row.statename | statusFilter
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="修改时间" min-width="150px">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time" /> -->
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        #default="{ row }"
        fixed="right"
        align="center"
        label="操作"
      >
        <el-button type="text" @click="onStart(row)">启动</el-button>
        <el-button type="text" @click="onStop(row)">停止</el-button>
        <!-- <el-button type="text" @click="onTailLog(row)">stdout</el-button>
        <el-button type="text" @click="onTailErrLog(row)">stderr</el-button>
        <el-button type="text" @click="onClearLog(row)">清理日志</el-button> -->
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right"
      :current-page.sync="pageNo"
      :page-size.sync="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="fetchData"
      @current-change="fetchData"
    />
    <el-dialog title="进程信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="进程详情">
          <el-input v-model="form.description" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="输入源">
          <el-input v-model="form.source" placeholder="请输入输入描述" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label="输出源">
          <el-input v-model="form.sink" placeholder="请输入输出描述" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="form.remark" placeholder="请输入任务描述" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEdit(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { SupervisordApi } from '@/api/supervisord'
import { MessageBox } from 'element-ui'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        RUNNING: '运行中',
        STOPPED: '已停止'
      }
      return statusMap[status]
    }
  },
  props: {
    instance: {
      default: '',
      type: String
    },
    name: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pageNo: 0,
      pageSize: 20,
      total: 0,
      dialogFormVisible: false,
      form: {
        jobId: 0,
        name: '',
        description: '',
        source: '',
        sink: '',
        remark: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      SupervisordApi.getData(this.instance, this.pageNo, this.pageSize).then(
        ({
          data: {
            data: { totalSize, records }
          }
        }) => {
          this.list = records
          this.listLoading = false
          this.total = totalSize
        }
      )
    },
    onStart(row) {
      SupervisordApi.status(this.instance, row.name, 'start').then((resp) => {
        const data = resp.data
        MessageBox.alert(
          data.code === 200 ? '启动成功' : '启动失败：' + data.message, '提示', { type: 'info' }
        )
        if (data.code === 200) this.fetchData()
      })
    },
    onStop(row) {
      SupervisordApi.status(this.instance, row.name, 'stop').then((resp) => {
        const data = resp.data
        MessageBox.alert(
          data.code === 200 ? '停止成功' : '停止失败：' + data.message, '提示', { type: 'info' }
        )
        if (data.code === 200) this.fetchData()
      })
    },
    toEdit(row) {
      this.dialogFormVisible = true
      this.form = { ...row }
    },
    onEdit(from) {
      console.log(from)
      this.dialogFormVisible = false
      SupervisordApi.editJob(this.instance, from.jobId, from).then((resp) => {
        const code = resp.data.code
        if (code === 200) this.fetchData()
      })
    },
    onTailLog(row) {
      this.$message({
        message: `敬请期待：${row.stdout_logfile}`,
        type: 'success'
      })
    },
    onTailErrLog(row) {
      this.$message({
        message: `敬请期待：${row.stderr_logfile}`,
        type: 'success'
      })
    },
    onClearLog(row) {
      this.$message({
        message: `敬请期待：${row.name}`,
        type: 'success'
      })
    }
  }
}
</script>
